<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-card ant-pro-card-border ant-pro-card-contain-card ant-pro-card-split"
      style="height: 320px;"
    >
      <div
        class="ant-pro-card-body"
      >
        <div
          class="ant-pro-card-col ant-pro-card-split-vertical ant-pro-card-col-6"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-steps ant-steps-vertical ant-steps-small"
                style="height: 100%;"
              >
                <div
                  class="ant-steps-item ant-steps-item-process ant-steps-item-active"
                >
                  <div
                    class="ant-steps-item-container"
                  >
                    <div
                      class="ant-steps-item-tail"
                    />
                    <div
                      class="ant-steps-item-icon"
                    >
                      <span
                        class="ant-steps-icon"
                      >
                        1
                      </span>
                    </div>
                    <div
                      class="ant-steps-item-content"
                    >
                      <div
                        class="ant-steps-item-title"
                      >
                        Fill in Basic Information
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="ant-steps-item ant-steps-item-wait"
                >
                  <div
                    class="ant-steps-item-container"
                  >
                    <div
                      class="ant-steps-item-tail"
                    />
                    <div
                      class="ant-steps-item-icon"
                    >
                      <span
                        class="ant-steps-icon"
                      >
                        2
                      </span>
                    </div>
                    <div
                      class="ant-steps-item-content"
                    >
                      <div
                        class="ant-steps-item-title"
                      >
                        Configure Template
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="ant-steps-item ant-steps-item-wait"
                >
                  <div
                    class="ant-steps-item-container"
                  >
                    <div
                      class="ant-steps-item-tail"
                    />
                    <div
                      class="ant-steps-item-icon"
                    >
                      <span
                        class="ant-steps-icon"
                      >
                        3
                      </span>
                    </div>
                    <div
                      class="ant-steps-item-content"
                    >
                      <div
                        class="ant-steps-item-title"
                      >
                        Configure Access
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="ant-steps-item ant-steps-item-wait"
                >
                  <div
                    class="ant-steps-item-container"
                  >
                    <div
                      class="ant-steps-item-tail"
                    />
                    <div
                      class="ant-steps-item-icon"
                    >
                      <span
                        class="ant-steps-icon"
                      >
                        4
                      </span>
                    </div>
                    <div
                      class="ant-steps-item-content"
                    >
                      <div
                        class="ant-steps-item-title"
                      >
                        Configure Deployment and Scheduling
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="ant-steps-item ant-steps-item-wait"
                >
                  <div
                    class="ant-steps-item-container"
                  >
                    <div
                      class="ant-steps-item-tail"
                    />
                    <div
                      class="ant-steps-item-icon"
                    >
                      <span
                        class="ant-steps-icon"
                      >
                        5
                      </span>
                    </div>
                    <div
                      class="ant-steps-item-content"
                    >
                      <div
                        class="ant-steps-item-title"
                      >
                        Preview
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-card-col ant-pro-card-col-18"
        >
          <div
            class="ant-pro-card ant-pro-card-border"
          >
            <div
              class="ant-pro-card-header"
            >
              <div
                class="ant-pro-card-title"
              >
                Traffic Usage
              </div>
            </div>
            <div
              class="ant-pro-card-body"
            >
              <div
                class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
              >
                <div
                  class="ant-space-item"
                >
                  <button
                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                    type="button"
                  >
                    <span>
                      Next
                    </span>
                  </button>
                </div>
                <div
                  class="ant-space-item"
                >
                  <button
                    class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
                    disabled=""
                    type="button"
                  >
                    <span>
                      Previous
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProCard 与 Steps 集成 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            split
          </strong>
          : 分割方式，根据响应式状态自动调整
        </li>
        <li>
          <strong>
            variant
          </strong>
          : 卡片变体样式，'outlined' 表示带边框
        </li>
        <li>
          <strong>
            style
          </strong>
          : 卡片样式对象，设置固定高度
        </li>
        <li>
          <strong>
            colSpan
          </strong>
          : 栅格列数，响应式时自动调整
        </li>
      </ul>
      <h4>
        Steps 组件配置：
      </h4>
      <ul>
        <li>
          <strong>
            direction
          </strong>
          : 步骤条方向，响应式时自动调整
        </li>
        <li>
          <strong>
            size
          </strong>
          : 步骤条尺寸，'small' 表示小尺寸
        </li>
        <li>
          <strong>
            current
          </strong>
          : 当前步骤索引
        </li>
        <li>
          <strong>
            items
          </strong>
          : 步骤项配置数组
        </li>
        <li>
          <strong>
            style
          </strong>
          : 步骤条样式，设置高度为 100%
        </li>
      </ul>
      <h4>
        Button 组件配置：
      </h4>
      <ul>
        <li>
          <strong>
            type
          </strong>
          : 按钮类型，'primary' 表示主要按钮
        </li>
        <li>
          <strong>
            onClick
          </strong>
          : 点击事件处理函数
        </li>
        <li>
          <strong>
            disabled
          </strong>
          : 是否禁用按钮
        </li>
      </ul>
      <h4>
        响应式布局特点：
      </h4>
      <ul>
        <li>
          <strong>
            断点控制
          </strong>
          : 当容器宽度小于 596px 时切换布局
        </li>
        <li>
          <strong>
            分割方式
          </strong>
          : 大屏幕使用垂直分割，小屏幕使用水平分割
        </li>
        <li>
          <strong>
            步骤方向
          </strong>
          : 大屏幕使用垂直步骤，小屏幕使用水平步骤
        </li>
        <li>
          <strong>
            栅格适配
          </strong>
          : colSpan 根据响应式状态自动调整
        </li>
      </ul>
      <h4>
        状态管理：
      </h4>
      <ul>
        <li>
          <strong>
            current
          </strong>
          : 使用 useState 管理当前步骤状态
        </li>
        <li>
          <strong>
            responsive
          </strong>
          : 使用 useState 管理响应式状态
        </li>
        <li>
          <strong>
            步骤控制
          </strong>
          : 通过按钮控制步骤的前进和后退
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            向导页面
          </strong>
          : 构建多步骤的向导页面
        </li>
        <li>
          <strong>
            配置页面
          </strong>
          : 分步骤配置复杂功能
        </li>
        <li>
          <strong>
            表单流程
          </strong>
          : 多步骤表单填写流程
        </li>
        <li>
          <strong>
            设置页面
          </strong>
          : 分步骤设置系统参数
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            步骤清晰
          </strong>
          : 确保每个步骤的标题清晰易懂
        </li>
        <li>
          <strong>
            状态同步
          </strong>
          : 确保 Steps 和按钮状态同步
        </li>
        <li>
          <strong>
            响应式设计
          </strong>
          : 确保在不同屏幕尺寸下都有良好的体验
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>